<template>
  <div class="orders">
    <van-tabs
      v-model="active"
      sticky
      color="linear-gradient(-42deg,rgba(255,107,96,1),rgba(255,71,71,1))"
      line-width="18"
      line-height="4"
      swipe-threshold="5"
      :border="false"
    >
      <!-- 全部订单 loading1 finished1 onLoad1 list1-->
      <van-tab title="全部订单">
        <van-list v-model="loading1" :finished="finished1" @load="onLoad1" finished-text="我是有底线的">
          <div class="order-list" v-for="(item,index) in list1" :key="index">
            <div class="list-hd border-b-1px">
              <span class="name">{{item.name}}</span>
              <span
                class="state"
                :style="{color:item.state==1?'#ff4747':null}"
              >{{item.state | formatState}}</span>
            </div>
            <div class="list-bd">
              <img class="avatar" :src="item.avatar" alt srcset />
              <div class="detail">
                <div class="count">
                  数量:
                  <span>{{item.count}}</span>
                </div>
                <div class="price">
                  总价:
                  <span>{{item.price}}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <!-- 待支付 loading2 finished2 onLoad2 list2-->
      <van-tab title="待支付">
        <van-list v-model="loading2" :finished="finished2" @load="onLoad2" finished-text="我是有底线的">
          <div class="order-list" v-for="(item,index) in list2" :key="index">
            <div class="list-hd border-b-1px">
              <span class="name">{{item.name}}</span>
              <span class="state">{{item.state | formatState}}</span>
            </div>
            <div class="list-bd">
              <img class="avatar" :src="item.avatar" alt srcset />
              <div class="detail">
                <div class="count">
                  数量:
                  <span>{{item.count}}</span>
                </div>
                <div class="price">
                  总价:
                  <span>{{item.price}}</span>
                </div>
              </div>
              <button class="btn" type="button">去支付</button>
            </div>
          </div>
        </van-list>
      </van-tab>
      <!-- 待使用 loading3 finished3 onLoad3 list3-->
      <van-tab title="待使用">
        <van-list v-model="loading3" :finished="finished3" @load="onLoad3" finished-text="我是有底线的">
          <div class="order-list" v-for="(item,index) in list3" :key="index">
            <div class="list-hd border-b-1px">
              <span class="name">{{item.name}}</span>
              <span class="state">{{item.state | formatState}}</span>
            </div>
            <div class="list-bd">
              <img class="avatar" :src="item.avatar" alt srcset />
              <div class="detail">
                <div class="count">
                  数量:
                  <span>{{item.count}}</span>
                </div>
                <div class="price">
                  总价:
                  <span>{{item.price}}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <!-- 退款/售后 loading4 finished4 onLoad4 list4-->
      <van-tab title="退款/售后">
        <van-list v-model="loading4" :finished="finished4" @load="onLoad4" finished-text="我是有底线的">
          <div class="order-list" v-for="(item,index) in list4" :key="index">
            <div class="list-hd border-b-1px">
              <span class="name">{{item.name}}</span>
              <span class="state">{{item.state | formatState}}</span>
            </div>
            <div class="list-bd">
              <img class="avatar" :src="item.avatar" alt srcset />
              <div class="detail">
                <div class="count">
                  数量:
                  <span>{{item.count}}</span>
                </div>
                <div class="price">
                  总价:
                  <span>{{item.price}}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <!-- 已完成 loading5 finished5 onLoad5 list5-->
      <van-tab title="已完成">
        <van-list v-model="loading5" :finished="finished5" @load="onLoad5" finished-text="我是有底线的">
          <div class="order-list" v-for="(item,index) in list5" :key="index">
            <div class="list-hd border-b-1px">
              <span class="name">{{item.name}}</span>
              <span class="state">{{item.state | formatState}}</span>
            </div>
            <div class="list-bd">
              <img class="avatar" :src="item.avatar" alt srcset />
              <div class="detail">
                <div class="count">
                  数量:
                  <span>{{item.count}}</span>
                </div>
                <div class="price">
                  总价:
                  <span>{{item.price}}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { orderState } from "@/config/config";
export default {
  data() {
    return {
      active: 0, //tab页签激活索引
      loading1: false, //全部订单加载状态
      finished1: false, //全部订单是否全部已加载
      loading2: false, //待支付加载状态
      finished2: false, //待支付是否全部已加载
      loading3: false, //待使用加载状态
      finished3: false, //待使用是否全部已加载
      loading4: false, //退款/售后订单加载状态
      finished4: false, //退款/售后订单是否全部已加载
      loading5: false, //已完成加载状态
      finished5: false, //已完成是否全部已加载
      list1: [], //全部订单列表
      list2: [], //待支付列表
      list3: [], //待使用列表
      list4: [], //退款/售后列表
      list5: [] //已完成列表
    };
  },
  filters: {
    formatState(state) {
      return orderState[state];
    }
  },
  methods: {
    //全部订单加载请求
    async onLoad1() {
      setTimeout(() => {
        // 请求数据
        this.list1 = [
          {
            name: "上海迪士尼4日欢乐自由行(成人票)",
            state: 1,
            count: 5,
            price: 299,
            avatar: require("@/assets/order-img.jpg")
          },
          {
            name: "上海迪士尼4日自由行(成人票)",
            state: 2,
            count: 5,
            price: 299,
            avatar: require("@/assets/order-img.jpg")
          },
          {
            name: "上海迪士尼4日欢乐自由行(成人票)",
            state: 5,
            count: 5,
            price: 299,
            avatar: require("@/assets/order-img.jpg")
          },
          {
            name: "上海迪士尼4日欢乐自由行(成人票)",
            state: 3,
            count: 5,
            price: 299,
            avatar: require("@/assets/order-img.jpg")
          },
          {
            name: "上海迪士尼4日欢乐自由行(成人票)",
            state: 4,
            count: 5,
            price: 299,
            avatar: require("@/assets/order-img.jpg")
          }
        ];
        // 加载状态结束
        this.loading1 = false; //

        // 数据全部加载完成停止onlond显示我是有底线的
        if (this.list1.length) {
          this.finished1 = true;
        }
      }, 1000);
      //请求参数
      //   let params = {};
      //发送请求
      //   const res = await this.$http.post("后台接口地址", params);
      //响应处理
    },
    //待支付订单加载请求
    async onLoad2() {
      setTimeout(() => {
        // 请求数据
        this.list2 = [
          {
            name: "上海迪士尼4日欢乐自由行(成人票)",
            state: 1,
            count: 5,
            price: 299,
            avatar: require("@/assets/order-img.jpg")
          }
        ];
        // 加载状态结束
        this.loading2 = false;

        // 数据全部加载完成停止onlond显示我是有底线的
        if (this.list2.length) {
          this.finished2 = true;
        }
      }, 1000);
    },
    //待使用加载请求
    async onLoad3() {
      setTimeout(() => {
        // 请求数据
        this.list3 = [
          {
            name: "上海迪士尼4日自由行(成人票)",
            state: 2,
            count: 5,
            price: 299,
            avatar: require("@/assets/order-img.jpg")
          }
        ];
        // 加载状态结束
        this.loading3 = false; //

        // 数据全部加载完成停止onlond显示我是有底线的
        if (this.list3.length) {
          this.finished3 = true;
        }
      }, 1000);
    },
    //退款/售后加载请求
    async onLoad4() {
      setTimeout(() => {
        // 请求数据
        this.list4 = [
          {
            name: "上海迪士尼4日自由行(成人票)",
            state: 3,
            count: 5,
            price: 299,
            avatar: require("@/assets/order-img.jpg")
          },
          {
            name: "上海迪士尼4日自由行(成人票)",
            state: 4,
            count: 5,
            price: 299,
            avatar: require("@/assets/order-img.jpg")
          }
        ];
        // 加载状态结束
        this.loading4 = false; //

        // 数据全部加载完成停止onlond显示我是有底线的
        if (this.list4.length) {
          this.finished4 = true;
        }
      }, 1000);
    },
    //已完成订单加载请求
    async onLoad5() {
      setTimeout(() => {
        // 请求数据
        this.list5 = [
          {
            name: "上海迪士尼4日欢乐自由行(成人票)",
            state: 1,
            count: 5,
            price: 299,
            avatar: require("@/assets/order-img.jpg")
          }
        ];
        // 加载状态结束
        this.loading5 = false;

        // 数据全部加载完成停止onlond显示我是有底线的
        if (this.list5.length) {
          this.finished5 = true;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.orders {
  /deep/.van-tabs__nav--line {
    padding-bottom: 0;
  }
  /deep/.van-tabs__line {
    bottom: 8px;
  }
  .order-list {
    height: 128px;
    margin: 10px 16px;
    border-radius: 5px;
    box-shadow: 0px 1px 12px 0px rgba(205, 203, 203, 0.34);
    //列表头部
    .list-hd {
      display: flex;
      justify-content: space-between;
      margin: 0 6px;
      line-height: 48px;
      font-weight: bold;
      @include border-b-1px(#f0f0f0);
      .name {
        margin-left: 7px;
        font-size: 16px;
        font-weight: bold;
        color: #2d2d2d;
        flex: 1;
      }
      .state {
        width: 45px;
        font-size: 13px;
        font-weight: bold;
        color: #999;
      }
    }
    //列表主体
    .list-bd {
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 10px;
      margin-left: 17px;
      .avatar {
        width: 60px;
        height: 60px;
        margin-right: 10px;
      }
      .detail {
        line-height: 22px;
        font-size: 14px;
        color: #666;
        .count,
        .price {
          margin-right: 13px;
        }
      }
      //支付按钮
      .btn {
        position: absolute;
        right: 12px;
        bottom: 0;
        width: 75px;
        height: 28px;
        border: none;
        color: #fff;
        background: linear-gradient(
          267deg,
          rgba(252, 127, 118, 1),
          rgba(255, 69, 69, 1)
        );
        box-shadow: 0px 1px 8px 0px rgba(255, 164, 164, 1);
        border-radius: 14px;
      }
    }
  }
}
</style>